<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui二维码生成扩展</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
	</head>
	<body>

		<div style="width: 800px; margin:0 auto;">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>layui生成二维码的扩展</legend>
			</fieldset>
			<div id="test"></div>
			<br />
			<blockquote class="layui-elem-quote layui-quote-nm" style="color: #999;">
				需要一个layui二维码生成的扩展，社区貌似没有，于是将一个 jquery二维码生成的插件封装为layui扩展，顺便分享给需要同样功能的朋友。
			</blockquote>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>layui生成二维码的扩展进阶用法</legend>
			</fieldset>
			<p><strong><strong><strong>指定</strong>二维码的生成方式：</strong><br /></strong></p>
			<p>可以在调用函数的同时输入想要的二维码生成方式（table/canvas）。<br /></p>
			<pre class="layui-code">//使用table生成
$('#qrcode').qrcode({
	render: "table",
	text: "http://www.buersoft.cn"
});

//使用canvas生成
$('#qrcode').qrcode({
	render: "canvas",
	text: "http://www.buersoft.cn"
});</pre>
			<p><strong><strong>指定</strong>生成二维码的大小：</strong></p>
			<p>可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。</p>
			<pre class="layui-code">//生成100*100(宽度100，高度100)的二维码
$('#qrcode').qrcode({
	render: "canvas", //也可以替换为table
	width: 100,
	height: 100,
	text: "http://www.buersoft.cn"
});</pre>
			<p><strong><strong>指定</strong>生成二维码的色彩样式：</strong></p>
			<p>可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。</p>
			<pre class="layui-code">//生成前景色为红色背景色为白色的二维码
$('#qrcode').qrcode({
	render: "canvas", //也可以替换为table
	foreground: "#C00",
	background: "#FFF",
	text: "http://www.buersoft.cn"
});</pre>
			<p><strong>中文ULR生成方法:</strong></p>
			<pre class="layui-code"> $("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码</pre>
		</div>

		<script src="../../../layui/layui.js"></script>
		<script>
			layui.config({
				base: '../../../layui_exts/' //配置 layui 第三方扩展组件存放的基础目录
			}).extend({
				qrcode: 'qrcode/qrcode'
			}).use(['jquery', 'qrcode'], function() {
				var $ = layui.$;

				$('#test').qrcode({
					render: "canvas",  //table
					width: 200,
					height: 200,
					foreground: "#C00",
					background: "#FFF",
					text: "http://www.buersoft.cn"
				});
			});
		</script>
	</body>
</html>
